<template>
  <div v-show="header.showSetting" class="icon-container" @click="handleSetting">
    <el-icon size="25" :class="{ rotate: isRotated }"><Setting /></el-icon>

    <simple-drawer></simple-drawer>
  </div>
</template>

<script setup lang="ts">
import {useLayouts} from "@/stores/modules/layouts.ts";

// 获取 layouts 状态
const layouts = useLayouts()
// 使用 storeToRefs 解构出来的属性默认是只读的，不能改变值，修改也无法响应式更新
const { header } = storeToRefs(layouts)

// 刷新旋转
const isRotated = ref(false);
const handleSetting = () => {
  // 切换旋转状态
  isRotated.value = true;

  // 打开抽屉
  header.value.isDrawer = true;

  // 在动画结束后取消旋转状态
  setTimeout(() => {
    isRotated.value = false;
  }, 500); // 500ms 是动画时长，可以根据实际情况调整

}
</script>

<style scoped lang="scss">
.icon-container {
  cursor: pointer;
  transition: transform 0.5s ease-in-out;
}

.rotate {
  animation: rotate 0.5s forwards;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>